import { defineComponent, ref } from "vue";
import './index.less'
import { useI18n } from "vue-i18n";

export default defineComponent({
    setup() {
        const { t } = useI18n()
        const iconsData = [
            {
                imgRef: ref("/tail/copyright/home_icon_aaa@2x.png"),
                overImg: "/tail/copyright/home_icon_aaa@2x2.png",
                outImg: "/tail/copyright/home_icon_aaa@2x.png",
                text: ref(t('tail.copyright1')),
            },
            {
                imgRef: ref("/tail/copyright/home_icon_jzhy@2x.png"),
                overImg: "/tail/copyright/home_icon_jzhy@2x2.png",
                outImg: "/tail/copyright/home_icon_jzhy@2x.png",
                text: ref(t('tail.copyright2')),
            },
            {
                imgRef: ref("/tail/copyright/home_icon_cxda@2x.png"),
                overImg: "/tail/copyright/home_icon_cxda@2x2.png",
                outImg: "/tail/copyright/home_icon_cxda@2x.png",
                text: ref(t('tail.copyright3')),
            },
            {
                imgRef: ref("/tail/copyright/home_icon_cxjy@2x.png"),
                overImg: "/tail/copyright/home_icon_cxjy@2x2.png",
                outImg: "/tail/copyright/home_icon_cxjy@2x.png",
                text: ref(),
            },
        ];

        const handleHover = (index: any, isOver: any) => {
            if (isOver) {
                iconsData[index].imgRef.value = iconsData[index].overImg;
            } else {
                iconsData[index].imgRef.value = iconsData[index].outImg;
            }
        };
        return () => (
            <div class='tail'>
                <div class='tail_top'>
                    <div class='tail_top_left'>
                        <div class='logo_follow_us'>
                            <div class='logo'><img src="/tail/home_logo_reactor@2x.png" alt="" /><span>Reactor</span></div>
                            <div class='follow_us'>
                                <div class='text'>{t('tail.follow_us')}</div>
                                <div class='imgs'>
                                    <img src="/tail/home_icon_twitter_normal@2x.png" alt="" />
                                    <img src="/tail/home_icon_ins_normal@2x.png" alt="" />
                                    <img src="/tail/home_icon_telegram_normal@2x.png" alt="" />
                                    <img src="/tail/home_icon_facebook_normal@2x.png" alt="" />
                                </div>
                            </div>
                        </div>
                        <div class='list'>
                            <div class="row">
                                <div class="title">
                                    {t('head.product')}
                                </div>
                                <div class="line">
                                    {t('head.strategy_backtesting')}
                                </div>
                                <div class="line">
                                    {t('head.manual_trading')}
                                </div>
                                <div class="line">
                                    {t('head.k_line_and_on_chain_data')}
                                </div>
                                <div class="line">
                                    {t('head.signal_mall')}
                                </div>
                                <div class="line">
                                    {t('head.strategy_mall')}
                                </div>
                            </div>
                            <div class="row">
                                <div class="title">
                                    {t('tail.robot')}
                                </div>
                                <div class="line">
                                    {t('head.trading_robot')}
                                </div>
                                <div class="line">
                                    {t('head.demo_robot')}
                                </div>
                                <div class="line">
                                    {t('head.replicant_robots')}
                                </div>
                                <div class="line">
                                    {t('head.arbitrage_robot')}
                                </div>
                                <div class="line">
                                    {t('head.market_maker_robot')}
                                </div>
                            </div>
                            <div class="row">
                                <div class="title">
                                    {t('head.about_us1')}
                                </div>
                                <div class="line">
                                    {t('head.about_us1')}
                                </div>
                                <div class="line">
                                    {t('head.oem1')}
                                </div>
                                <div class="line">
                                    {t('head.social_media1')}
                                </div>
                                <div class="line">
                                    {t('head.contact_us1')}
                                </div>
                                <div class="line">
                                    {t('tail.privacy_policy')}
                                </div>
                                <div class="line">
                                    {t('tail.service_aagreement')}
                                </div>
                                <div class="line">
                                    {t('tail.disclaimers')}
                                </div>
                            </div>
                            <div class="row">
                                <div class="title">
                                    {t('head.more')}
                                </div>
                                <div class="line">
                                    {t('tail.help2')}
                                </div>
                                <div class="line">
                                    {t('head.customization_strategy1')}
                                </div>
                                <div class="line">
                                    {t('head.rebate1')}
                                </div>
                                <div class="line">
                                    {t('head.wallet1')}
                                </div>
                                <div class="line">
                                    {t('head.dca1')}
                                </div>
                                <div class="line">
                                    {t('tail.download_text')}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class='tail_top_right'>
                        <div class="trustpilot"><img src="/tail/trustpilot1.png" alt="" class="trustpilot1" /></div>
                        <div class='text'>{t('tail.scan_to_use_DAPP')}</div>
                        <div class="QRCode">
                            <img src="/tail/Group.svg" />
                        </div>
                        <div class="macos"></div>
                        <div class="windows"></div>
                    </div>
                </div>
                <div class="copyright">
                    {iconsData.map((iconData, index) => (
                        <div key={index} onMouseenter={() => handleHover(index, true)} onMouseleave={() => handleHover(index, false)}>
                            <img src={iconData.imgRef.value} alt="" />
                            <div>{t('tail.copyright' + (index + 1))}</div>
                        </div>
                    ))}
                </div>
                <hr />
                <div class='tail_text'>{t('tail.bottom1')}</div>
                <div class='tail_text2'> <img src="/tail/copyright/contactImg2.svg" alt="" /> <span>{t('tail.bottom2')}</span></div>
            </div>
        );
    }
})